<template>
    <div class="page-container">
        <el-form :model="form" ref="formRulesOneRef" size="default" label-width="80px" class="mt35">
            <el-row :gutter="35" v-for="(v, k) in form.list" :key="k">
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                    <el-form-item label="年度" :prop="`list[${k}].year`" :rules="[{ required: true, message: `年度不能为空`, trigger: 'blur' }]">
                        <template #label>
                            <el-button v-if="k === 0" type="primary" size="small" :icon="Plus" @click="onAddRow"/>
                            <el-button v-else type="danger" size="small" :icon="Edit" @click="onDelRow(k)"/>
                            <span class="ml5">年度</span>
                        </template>
                        <el-input v-model="form.list[k].year" style="width: 100%" placeholder="请输入"> </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                    <el-form-item label="月度" :prop="`list[${k}].month`" :rules="[{ required: true, message: `月度不能为空`, trigger: 'blur' }]">
                        <el-input v-model="form.list[k].month" style="width: 100%" placeholder="请输入"> </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                    <el-form-item label="日度" :prop="`list[${k}].day`" :rules="[{ required: true, message: `日度不能为空`, trigger: 'blur' }]">
                        <el-input v-model="form.list[k].day" style="width: 100%" placeholder="请输入"> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!---->
        <el-row class="flex mt15">
            <div class="flex-margin">
                <el-button size="default" @click="onResetForm">
                    <el-icon>
                        <ele-RefreshRight />
                    </el-icon>
                    重置表单
                </el-button>
                <el-button size="default" type="primary" @click="onSubmitForm">
                    <SvgIcon name="iconfont icon-shuxing" />
                    验证表单
                </el-button>
            </div>
        </el-row>
    </div>
</template>

<script setup name="dynamicForm">
const { proxy } = getCurrentInstance()
const router = useRouter()

const state = reactive({
    form: {
        list: [
            {
                year: '',
                month: '',
                day: '',
            },
        ],
    },
});

const { form } = toRefs(state);

// 新增行
const onAddRow = () => {
    state.form.list.push({
        year: '',
        month: '',
        day: '',
    });
};
// 删除行
const onDelRow = (k) => {
    state.form.list.splice(k, 1);
};
// 表单验证
const onSubmitForm = () => {
    proxy.$refs.formRulesOneRef.validate((valid) => {
        if (valid) {
            proxy.$message.success('验证成功');
        } else {
            return false;
        }
    });
};
// 重置表单
const onResetForm = () => {
    proxy.$refs.formRulesOneRef.resetFields();
};

// 页面加载时
onMounted(() => {});

</script>
<style lang="less" scoped>

</style>
